<div class="landing {{config.dark ? 'landing-dark' : 'landing-light'}}" [ngClass]="{'landing-news-active': app.newsActive}">
    <div class="landing-intro">
        <app-news *ngIf="app.newsActive && app.announcement" (onNewsHide)="app.onNewsClose()" [announcement]="app.announcement"></app-news>
        <section #containerElement class="landing-header pad-section" [ngClass]="{'landing-header-active': menuActive}">
            <span>
                <a href="/">
                    <img src="assets/showcase/images/primeng-logo-{{config.dark ? 'light' : 'dark'}}.svg" alt="PrimeNG" class="landing-header-logo">
                </a>
            </span>
            
            <div class="flex align-items-center">
                <nav class="scalein origin-top">
                    <ol class="list-none m-0 p-0 flex flex-column lg:flex-row flex-wrap lg:flex-nowrap lg:align-items-center font-semibold">
                        <li class="mr-0 lg:mr-2">
                            <a [routerLink]="['setup']">
                                <img src="assets/showcase/images/landing/core-icon.svg" alt="Primeng core">
                                <span>Components</span>
                            </a>
                        </li>
                        <li class="mr-0 lg:mr-2">
                            <a href="https://www.primefaces.org/primeblocks-ng" target="_blank">
                                <img src="assets/showcase/images/landing/blocks-icon.svg" alt="Primeng blocks">
                                <span>Blocks</span>
                            </a>
                        </li>
                        <li class="mr-0 lg:mr-2">
                            <a href="https://www.primefaces.org/designer-ng" target="_blank">
                                <img src="assets/showcase/images/landing/designer-icon.svg" alt="Primeng designer">
                                <span>Designer</span>
                            </a>
                        </li>
                        <li class="mr-0 lg:mr-2">
                            <a href="https://www.primefaces.org/store/templates.xhtml" target="_blank">
                                <img src="assets/showcase/images/landing/templates-icon.svg" alt="Primeng templates">
                                <span>Templates</span>
                            </a>
                        </li>
                    </ol>
                </nav>
                <a href="https://github.com/primefaces/primeng" target="_blank" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
                    <i class="pi pi-github"></i>
                </a>
                <a href="https://discord.gg/gzKFYnpmCY" target="_blank" rel="noopener noreferrer" class="linkbox p-0 header-button mr-2 flex align-items-center justify-content-center flex-shrink-0">
                    <i class="pi pi-discord"></i>
                </a>
                <button type="button" class="linkbox header-button inline-flex align-items-center justify-content-center" (click)="toggleDarkMode()">
                    <i class="pi pi-{{config.dark ? 'sun' : 'moon'}}"></i>
                </button>
                <button class="linkbox header-button inline-flex align-items-center justify-content-center lg:hidden ml-2 menu-button" (click)="menuActive = !menuActive">
                    <i class="pi pi-bars"></i>
                </button>
            </div>
        </section>

        <section class="landing-hero flex align-items-center flex-column justify-content-center relative" [ngClass]="{'hero-animation': setAnimation}">
            <div class="hero-inner z-2 relative">
                <div class="flex flex-column md:align-items-center md:flex-row">
                    <div class="p-2 flex flex-row md:flex-column">
                        <a href="https://www.primefaces.org/store" target="_blank">
                            <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center">
                                <div class="flex flex-column align-items-center">
                                    <img src="assets/showcase/images/landing/templates-icon.svg" alt="primeng templates" />
                                    <div class="name">
                                        <b>Templates</b>
                                        <span>Spectacular Designs</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <a href="https://primefaces.org/designer-ng" target="_blank">
                            <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation ml-4 md:ml-0 md:mt-4 flex align-items-center justify-content-center" >
                                <div class="flex flex-column align-items-center">
                                    <img src="assets/showcase/images/landing/designer-icon.svg" alt="primeng templates" />
                                    <div class="name">
                                        <b>Theme Designer</b>
                                        <span>Create Your Own</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="p-2 flex flex-row md:flex-column">
                        <a href="https://github.com/primefaces/primeng" target="_blank">
                            <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center" >
                                <div class="flex flex-column align-items-center">
                                    <img src="assets/showcase/images/landing/core-icon.svg" alt="primeng core" />
                                    <div class="name">
                                        <b>Open Source</b>
                                        <span>80+ UI Components</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <a [routerLink]="['setup']">
                            <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation logo hidden md:flex my-4 align-items-center justify-content-center">
                                <div class="hero-box-inner text-center">
                                    <img src="assets/showcase/images/landing/overview-icon.svg" alt="primeng main" />
                                    <div class="name flex flex-column">
                                        <b class="font-bold mb-1">NEXT-GEN</b>
                                        <b class="font-bold">ANGULAR UI</b>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <a href="https://primefaces.org/primeflex/" target="_blank">
                            <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 align-items-center justify-content-center" >
                                <div class="flex flex-column align-items-center">
                                    <img src="assets/showcase/images/landing/css-icon.svg" alt="primeng icons" />
                                    <div class="name">
                                        <b>CSS Utilities</b>
                                        <span>PrimeFlex CSS</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="p-2 flex flex-row md:flex-column">
                        <a href="https://primefaces.org/primeblocks-ng" target="_blank">
                            <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex align-items-center justify-content-center">
                                <div class="flex flex-column align-items-center">
                                    <img src="assets/showcase/images/landing/blocks-icon.svg" alt="primeng templates" />
                                    <div class="name">
                                        <b>Prime Blocks</b>
                                        <span>350+ UI Blocks</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                        <a [routerLink]="['icons']">
                            <div class="hero-box w-10rem h-10rem md:w-12rem md:h-12rem animation flex ml-4 md:ml-0 md:mt-4 align-items-center justify-content-center">
                                <div class="flex flex-column align-items-center">
                                    <img src="assets/showcase/images/landing/icons-icon.svg" alt="primeng templates" />
                                    <div class="name">
                                        <b>Icon Library</b>
                                        <span>200+ Icons</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="hero-border-top hidden md:block"></div>
                <div class="hero-border-left hidden md:block"></div>
                <div class="hero-border-right hidden md:block"></div>
            </div>
    
            <section class="landing-getstarted flex flex-column md:flex-row align-items-center justify-content-center mt-8 z-1">
                
                <a class="linkbox active font-semibold py-3 px-4 fadeinleft animation-duration-2000 animation-ease-out" [routerLink]="'setup'">
                    Get Started 
                    <i class="pi pi-arrow-right ml-3"></i>
                </a>
                
                <div class="box download-box font-medium p-3 px-4 mt-3 md:mt-0 md:ml-3 bg-transparent inline-flex align-items-center fadeinright animation-duration-2000 animation-ease-out">
                    <i class="download-icon pi pi-download mr-3"></i>
                    <span class="font-bold" :style="{fontFamily:'monaco'}">npm i primeng</span>
                </div>
            </section>
    
            <div class="hero-bg absolute top-0 left-0 right-0 bottom-0 z-0">
                <div class="hero-strip-top"></div>
                <div class="hero-strip-left"></div>
            </div>
        </section>
    </div>

    <section class="landing-components py-8">
        <div class="section-header">Components</div>
        <p class="section-detail"><span class="font-bold text-900">Over 80</span> Angular UI Components with top-notch quality to help you implement all your UI requirements in style.</p>
        <div class="flex justify-content-center mt-4">
            <a [routerLink]="['setup']">
                <a class="font-semibold p-3 border-round flex align-items-center linkbox active">
                    <span>Get Started</span>
                    <i class="pi pi-arrow-right ml-2"></i>
                </a>
            </a>
        </div>
        <div class="components-main flex mt-7 relative md:justify-content-center overflow-auto">
            <div class="flex flex-column px-3 py-8 z-1">
                <div class="box p-4 mb-5">
                    <span class="text-secondary font-medium block mb-3">Balance</span>
                    <div class="flex">
                        <p-inputNumber [(ngModel)]="val1" mode="currency" currency="USD" locale="en-US" class="mr-2"></p-inputNumber>
                        <p-inputNumber [(ngModel)]="val2" mode="currency" currency="USD" locale="en-US"></p-inputNumber>
                    </div>
                    <span class="text-secondary font-medium block mt-5 mb-3">Category</span>
                    <div class="flex justify-content-between">
                        <div class="flex align-items-center">
                            <p-radioButton [(ngModel)]="selectedValue" inputId="category1" value="C" name="radiovalue"></p-radioButton>
                            <label for="category1" class="ml-2 font-medium">Clothing</label>
                        </div>
                        <div class="flex align-items-center">
                            <p-radioButton [(ngModel)]="selectedValue" inputId="category2" value="F" name="radiovalue"></p-radioButton>
                            <label for="category2" class="ml-2 font-medium">Fitness</label>
                        </div>
                        <div class="flex align-items-center">
                            <p-radioButton [(ngModel)]="selectedValue" inputId="category3" value="E" name="radiovalue"></p-radioButton>
                            <label for="category3" class="ml-2 font-medium">Electronics</label>
                        </div>
                    </div>
                </div>
                <div class="box p-4 mb-5">
                    <p-chart type="line" [data]="chartData" [options]="chartOptions"></p-chart>
                </div>
                <div class="box p-4 mb-5">
                    <p-tabMenu [model]="items" [activeItem]="items[0]"></p-tabMenu>
                </div>
                <div class="box p-4">
                    <ul class="list-none p-0 m-0">
                        <li class="flex align-items-center mb-3">
                            <img src="assets/showcase/images/landing/avatar-1.svg" alt="avatar 1" class="w-2rem h-2rem mr-3" />
                            <span class="font-medium">Darrel Steward</span>
                            <p-progressBar value="15" [showValue]="false" class="w-10rem ml-auto mr-3" [style]="{'height':'.5rem'}"></p-progressBar>
                            <span class="text-secondary font-medium">15%</span>
                        </li>
                        <li class="flex align-items-center mb-3">
                            <img src="assets/showcase/images/landing/avatar-2.svg" alt="avatar 2" class="w-2rem h-2rem mr-3" />
                            <span class="font-medium">Albert Flores</span>
                            <p-progressBar value="85" [showValue]="false" class="w-10rem ml-auto mr-3" [style]="{'height':'.5rem'}"></p-progressBar>
                            <span class="text-secondary font-medium">85%</span>
                        </li>
                        <li class="flex align-items-center mb-3">
                            <img src="assets/showcase/images/landing/avatar-3.svg" alt="avatar 3" class="w-2rem h-2rem mr-3" />
                            <span class="font-medium">Kathryn Murphy</span>
                            <p-progressBar value="50" [showValue]="false" class="w-10rem ml-auto mr-3" [style]="{'height':'.5rem'}"></p-progressBar>
                            <span class="text-secondary font-medium">50%</span>
                        </li>
                        <li class="flex align-items-center mb-3">
                            <img src="assets/showcase/images/landing/avatar-4.svg" alt="avatar 4" class="w-2rem h-2rem mr-3" />
                            <span class="font-medium">Cody Fisher</span>
                            <p-progressBar value={75} [showValue]="false" class="w-10rem ml-auto mr-3" [style]="{'height':'.5rem'}"></p-progressBar>
                            <span class="text-secondary font-medium">75%</span>
                        </li>
                        <li class="flex align-items-center mb-3">
                            <img src="assets/showcase/images/landing/avatar-5.svg" alt="avatar 5" class="w-2rem h-2rem mr-3" />
                            <span class="font-medium">Brandon Atkinson</span>
                            <p-progressBar value={60} [showValue]="false" class="w-10rem ml-auto mr-3" [style]="{'height':'.5rem'}"></p-progressBar>
                            <span class="text-secondary font-medium">60%</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="flex flex-column justify-content-start px-3 z-1 mx-auto md:mx-0">
                <div class="box p-4 mb-5">
                    <div class="surface-card mb-4 w-20rem text-center p-5" [style]="{'border-radius':'10px'}">
                        <img src="assets/showcase/images/landing/watch.png" alt="Watch"/>
                    </div>
                    <div class="flex align-items-center mb-4">
                        <div class="flex flex-column">
                            <span class="block font-semibold mb-1">Brown Watch</span>
                            <span class="text-secondary text-sm">Premium Quality</span>
                        </div>
                        <span class="font-medium text-xl ml-auto">$12.45</span>
                    </div>
                    <button pButton label="Add to Cart" icon="pi pi-shopping-cart" class="w-full p-button-outlined"></button>
                </div>
                <div class="box p-4 mb-5">
                    <p-tree [value]="treeData" class="bg-transparent border-none p-0"></p-tree>
                </div>
                <div class="box p-4 mb-5">
                    <div class="flex align-items-center">
                        <p-chip label="Angular" class="mr-2 font-medium" [removable]="true"></p-chip>
                        <span class="font-medium">Typescript</span>
                        <p-inputSwitch class="ml-auto" [(ngModel)]="checked" (onChange)="handleChange($event)"></p-inputSwitch>
                    </div>
                    <div class="mt-5">
                        <p-selectButton [(ngModel)]="selectedVal" [options]="selectButtonOptions"></p-selectButton>
                    </div>
                </div>
            </div>
            <div class="flex flex-column px-3 py-5 z-1">
                <div class="box p-4 mb-5">
                    <div class="flex justify-content-center">
                        <p-slider [(ngModel)]="rangeValues" class="w-20rem" [range]="true"></p-slider>
                    </div>
                </div>
                <div class="box p-4 mb-5">
                    <ul class="list-none p-0 m-0">
                        <li class="flex mb-3">
                            <span class="mr-3">
                                <img src="assets/showcase/images/landing/avatar.png" alt="Avatar" class="w-3rem h-3rem" />
                            </span>
                            <div class="flex flex-column">
                                <span class="font-bold mb-2">Amanda Williams</span>
                                <p class="m-0 text-secondary">Webmaster</p>
                            </div>
                        </li>
                        <li class="flex">
                            <a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" [style]="{'border-radius':'10px'}">
                                <i class="pi pi-home text-xl mr-3"></i>
                                <span class="flex flex-column">
                                    <span class="font-bold mb-1">Dashboard</span>
                                    <span class="m-0 text-secondary">Control Panel</span>
                                </span>
                            </a>
                        </li>
                        <li class="flex">
                            <a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" [style]="{'border-radius':'10px'}">
                                <i class="pi pi-envelope text-xl mr-3"></i>
                                <span class="flex flex-column">
                                    <span class="font-bold mb-1">Inbox</span>
                                    <span class="m-0 text-secondary">View Messages</span>
                                </span>
                                <p-badge value="3" class="ml-auto"></p-badge>
                            </a>
                        </li>
                        <li class="flex">
                            <a class="flex align-items-center p-3 w-full hover:surface-hover transition-colors transition-duration-150 cursor-pointer" [style]="{'border-radius':'10px'}">
                                <i class="pi pi-cog text-xl mr-3"></i>
                                <span class="flex flex-column">
                                    <span class="font-bold mb-1">Profile</span>
                                    <span class="m-0 text-secondary">Account Settings</span>
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="box p-4 mb-5">
                    <p-calendar inputId="date" [(ngModel)]="date1" [inline]="true" [showWeek]="true"></p-calendar>
                </div>
            </div>
            <div class="components-strip-top absolute w-full md:w-6 h-8rem top-0 left-0"></div>
            <div class="components-strip-bottom absolute w-full md:w-6 h-8rem bottom-0 right-0"></div>
        </div>
    </section>

    <section class="landing-themes py-8">
        <div class="section-header">Themes</div>
        <p class="section-detail">Crafted on a design-agnostic infrastructure, choose from a vast amount of themes such as material, bootstrap, tailwind, primeone or develop your own.</p>
        <div class="flex flex-wrap justify-content-center">
            <button type="button" class="font-medium linkbox mr-3 mt-4" [ngClass]="{'active': theme.startsWith('lara')}" (click)="changeTableTheme(config.dark ? 'lara-dark-blue' : 'lara-light-blue')">PrimeOne</button>
            <button type="button" class="font-medium linkbox mr-3 mt-4" [ngClass]="{'active': theme.startsWith('md')}" (click)="changeTableTheme(config.dark ? 'md-dark-indigo' : 'md-light-indigo')">Material</button>
            <button type="button" class="font-medium linkbox mr-3 mt-4" [ngClass]="{'active': theme.startsWith('bootstrap')}" (click)="changeTableTheme(config.dark ? 'bootstrap4-dark-blue' : 'bootstrap4-light-blue')">Bootstrap</button>
            <a type="button" class="font-medium p-link linkbox mt-4" href="https://www.primefaces.org/designer-ng" target="_blank">more...</a>
        </div>
        <div class="themes-main flex mt-7 justify-content-center pad-section" [style]="{'background-size': 'cover'}" [ngStyle]="{'background-image': config.dark ? 'url(assets/showcase/images/landing/wave-dark-alt.svg)' : 'url(assets/showcase/images/landing/wave-light-alt.svg)'}">
            <div class="box overflow-hidden z-1 p-5 table-container">
                <p-table #dt [value]="customers" [(selection)]="selectedCustomers" dataKey="id" styleClass="p-datatable-customers" [rowHover]="true"
                [rows]="5" [showCurrentPageReport]="true" [rowsPerPageOptions]="[10,25,50]" [loading]="loading"  responsiveLayout="scroll"
                [paginator]="true" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" [globalFilterFields]="['name','country.name','representative.name','status']">
                <ng-template pTemplate="caption">
                    <div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
                        <h5 class="m-0">Customers</h5>
                        <span class="block mt-2 md:mt-0 p-input-icon-left">
                            <i class="pi pi-search"></i>
                            <input class="p-inputtext" type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="Search..." />
                        </span>
                    </div>
                </ng-template>
                <ng-template pTemplate="header">
                    <tr>
                        <th style="width: 3rem">
                            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                        </th>
                        <th pSortableColumn="name">
                            <div class="flex justify-content-between align-items-center">
                                Name
                                <p-sortIcon field="name"></p-sortIcon>
                            </div>
                        </th>
                        <th pSortableColumn="country.name">
                            <div class="flex justify-content-between align-items-center">
                                Country
                                <p-sortIcon field="country.name"></p-sortIcon>
                                
                            </div>
                        </th>
                        <th pSortableColumn="representative.name">
                            <div class="flex justify-content-between align-items-center">
                                Agent
                                <p-sortIcon field="representative.name"></p-sortIcon>
                            </div>
                        </th>
                        <th pSortableColumn="date">
                            <div class="flex justify-content-between align-items-center">
                                Date
                                <p-sortIcon field="date"></p-sortIcon>
                            </div>
                        </th>
                        <th pSortableColumn="balance">
                            <div class="flex justify-content-between align-items-center">
                                Balance
                                <p-sortIcon field="balance"></p-sortIcon>
                            </div>
                        </th>
                        <th pSortableColumn="status">
                            <div class="flex justify-content-between align-items-center">
                                Status
                                <p-sortIcon field="status"></p-sortIcon>
                            </div>
                        </th>
                        <th pSortableColumn="activity">
                            <div class="flex justify-content-between align-items-center">
                                Activity
                                <p-sortIcon field="activity"></p-sortIcon>
                            </div>
                        </th>
                        <th style="width: 8rem"></th>
                    </tr>
                </ng-template>
                <ng-template pTemplate="body" let-customer>
                    <tr class="p-selectable-row">
                        <td>
                            <p-tableCheckbox [value]="customer"></p-tableCheckbox>
                        </td>
                        <td style="width:14%; min-width:14rem;">
                            <span class="p-column-title">Name</span>
                            {{customer.name}}
                        </td>
                        <td style="width:14%; min-width:14rem;">
                            <span class="p-column-title">Country</span>
                            <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + customer.country.code" width="30">
                            <span class="image-text">{{customer.country.name}}</span>
                        </td>
                        <td style="width:14%; min-width:14rem;">
                            <span class="p-column-title">Representative</span>
                            <img [alt]="customer.representative.name" src="assets/showcase/images/demo/avatar/{{customer.representative.image}}" width="32" style="vertical-align: middle" />
                            <span class="image-text">{{customer.representative.name}}</span>
                        </td>
                        <td style="width:14%; min-width:8rem;">
                            <span class="p-column-title">Date</span>
                            {{customer.date | date: 'MM/dd/yyyy'}}
                        </td>
                        <td style="width:14%; min-width:8rem;">
                            <span class="p-column-title">Balance</span>
                            {{customer.balance | currency:'USD':'symbol'}}
                        </td>
                        <td style="width:14%; min-width:10rem;">
                            <span class="p-column-title">Status</span>
                            <span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
                        </td>
                        <td style="width:14%; min-width:6rem;">
                            <span class="p-column-title">Activity</span>
                            <p-progressBar [value]="customer.activity" [showValue]="false" [style]="{'height':'6px'}"></p-progressBar>
                        </td>
                        <td style="text-align: center">
                            <button pButton type="button" class="p-button-text p-button-icon-only" icon="pi pi-cog"></button>
                        </td>
                    </tr>
                </ng-template>
                <ng-template pTemplate="emptymessage">
                    <tr>
                        <td colspan="8">No customers found.</td>
                    </tr>
                </ng-template>
            </p-table>
            </div>
        </div>
    </section>

    <section id="blocks-section" class="landing-blocks pt-8 overflow-hidden">
        <div class="section-header">PrimeBlocks</div>
        <p class="section-detail">280+ ready to copy-paste UI blocks to build spectacular applications in no time.</p>
        <div class="flex justify-content-center mt-4">
            <a href="https://www.primefaces.org/primeblocks-ng" target="_blank" class="font-semibold p-3 border-round flex align-items-center linkbox active" style="z-index:99;">
                <span>Learn More</span>
                <i class="pi pi-arrow-right ml-2"></i>
            </a>
        </div>
        <section class="prime-blocks blocks-animation flex justify-content-center align-items-center flex-column">
            <div class="flex">
                <div class="prime-block flex align-self-stretch p-1">
                    <div class="block-sidebar w-1 p-3">
                        <div class="logo">
                            <img src="assets/showcase/images/landing/blocks/logo-1.svg" alt="block logo" />
                        </div>
                        <div class="sidebar-menu mt-5">
                            <div class="bar w-8 my-3"></div>
                            <div class="bar w-9 my-3"></div>
                            <div class="bar w-7 my-3"></div>
                            <div class="bar w-6 my-3"></div>
                            <div class="bar w-9 my-3"></div>
                        </div>
                    </div>
                    <div class="block-content flex-1 p-4 flex flex-column">
                        <div class="bar w-1"></div>
                        <div class="block-main mt-4 h-full flex justify-content-center align-items-center flex-column">
                            <div class="flex justify-content-between">
                                <div class="block-item w-6rem">
                                    <div class="flex justify-content-between">
                                        <div>
                                            <div class="bar w-2rem mt-2"></div>
                                            <div class="bar w-4rem mt-3"></div>
                                        </div>
                                        <div>
                                            <div class="flex-1">
                                                <div class="circle circle-highlight"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="block-item block-item-active animation-1 mx-3 w-6rem">
                                    <div class="flex justify-content-between">
                                        <div>
                                            <div class="bar w-2rem mt-2"></div>
                                            <div class="bar w-4rem mt-3"></div>
                                        </div>
                                        <div>
                                            <div class="circle"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="block-item w-6rem">
                                    <div class="flex justify-content-between">
                                        <div>
                                            <div class="bar w-2rem mt-2"></div>
                                            <div class="bar w-4rem mt-3"></div>
                                        </div>
                                        <div>
                                            <div class="circle circle-highligh"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="flex justify-content-between mt-3">
                                <div class="block-item w-6rem">
                                    <div class="flex justify-content-between">
                                        <div>
                                            <div class="bar w-2rem mt-2"></div>
                                            <div class="bar w-4rem mt-3"></div>
                                        </div>
                                        <div>
                                            <div class="circle circle-highligh"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="block-item mx-3 w-6rem">
                                    <div class="flex justify-content-between">
                                        <div>
                                            <div class="bar w-2rem mt-2"></div>
                                            <div class="bar w-4rem mt-3"></div>
                                        </div>
                                        <div>
                                            <div class="circle circle-highligh"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="block-item w-6rem">
                                    <div class="flex justify-content-between">
                                        <div>
                                            <div class="bar w-2rem mt-2"></div>
                                            <div class="bar w-4rem mt-3"></div>
                                        </div>
                                        <div>
                                            <div class="circle circle-highligh"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex ml-8">
                <div class="prime-block p-1 flex align-self-stretch flex-column">
                    <div class="block-header py-3 px-4 flex justify-content-between align-items-center">
                        <div class="logo pr-5">
                            <img src="assets/showcase/images/landing/blocks/logo-1.svg" alt="block logo" />
                        </div>
                        <div class="flex-auto sidebar-menu flex">
                            <div class="bar w-2rem mx-2"></div>
                            <div class="bar w-2rem mx-2"></div>
                            <div class="bar w-2rem mx-2"></div>
                            <div class="bar w-2rem mx-2"></div>
                            <div class="bar w-2rem mx-2"></div>
                        </div>
                        <div class="circle circle-highlight"></div>
                    </div>
                    <div class="block-content flex-1 p-4 flex flex-column">
                        <div class="bar w-1"></div>
                        <div class="block-main mt-4 h-full flex justify-content-center align-items-center flex-column">
                            <div class="flex justify-content-between">
                                <div class="block-item w-4rem">
                                    <div class="bar w-2rem "></div>
                                    <span class="text my-2">26 %</span>
                                    <div class="box box-orange"></div>
                                </div>
                                <div class="block-item block-item-active animation-2 ml-3 mr-3 w-4rem">
                                    <div class="bar w-1rem"></div>
                                    <span class="text my-2">6 %</span>
                                    <div class="box box-pink"></div>
                                </div>
                                <div class="block-item mr-3 w-4rem">
                                    <div class="bar w-4rem "></div>
                                    <span class="text my-2">62 %</span>
                                    <div class="box box-green"></div>
                                </div>
                                <div class="block-item w-4rem">
                                    <div class="bar w-2rem "></div>
                                    <span class="text my-2">39 %</span>
                                    <div class="box box-blue"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="prime-block flex align-self-stretch p-1">
                    <div class="block-sidebar p-3">
                        <div class="logo">
                            <img src="assets/showcase/images/landing/blocks/logo-2.svg" alt="block logo" />
                        </div>
                        <div class="sidebar-menu mt-5">
                            <div class="circle my-3"></div>
                            <div class="circle my-3"></div>
                            <div class="circle my-3"></div>
                        </div>
                    </div>
                    <div class="block-sidebar-list px-4">
                        <div class="bar w-2rem my-3"></div>
                        <div class="bar w-3rem my-3"></div>
                        <div class="bar w-2rem my-3"></div>
                        <div class="bar w-2rem my-3"></div>
                        <div class="bar w-1rem my-3"></div>
                        <div class="bar w-3rem my-3"></div>
                        <div class="bar w-3rem my-3"></div>
                        <div class="bar w-2rem my-3"></div>
                    </div>
                    <div class="block-content flex-1 my-5 mx-4 flex flex-column">
                        <div class="block-main  h-full flex justify-content-center align-items-center flex-column px-2">
                            <div class="flex justify-content-between  ">
                                <div class="block-item  w-3 flex justify-content-between flex-column ">
                                    <div class="bar w-full "></div>
                                    <div class="flex align-items-center mt-3">
                                        <div class="circle circle-small circle-highlight mr-2"></div>
                                        <div class="bar w-2rem"></div>
                                    </div>
                                    <div class="bar bar-button w-4rem mt-4"></div>
                                </div>
                                <div class="block-item  block-item-active animation-3 mx-3 w-3 flex justify-content-between flex-column">
                                    <div class="bar w-full "></div>
                                    <div class="flex align-items-center mt-3">
                                        <div class="circle circle-small circle-highlight mr-2"></div>
                                        <div class="bar w-2rem"></div>
                                    </div>
                                    <div class="flex align-items-center mt-3">
                                        <div class="circle circle-small circle-highlight mr-2"></div>
                                        <div class="bar w-3rem"></div>
                                    </div>
                                    <div class="bar bar-button w-4rem mt-4"></div>
                                </div>
                                <div class="block-item  w-3 flex justify-content-between flex-column">
                                    <div class="bar w-full "></div>
                                    <div class="flex align-items-center mt-3">
                                        <div class="circle circle-small circle-highlight mr-2"></div>
                                        <div class="bar w-2rem"></div>
                                    </div>
                                    <div class="flex align-items-center mt-3">
                                        <div class="circle circle-small circle-highlight mr-2"></div>
                                        <div class="bar w-2rem"></div>
                                    </div>
                                    <div class="flex align-items-center mt-3">
                                        <div class="circle circle-small circle-highlight mr-2"></div>
                                        <div class="bar w-2rem"></div>
                                    </div>
                                    <div class="bar bar-button w-4rem mt-4"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex -mr-8">
                <div class="prime-block flex align-self-stretch p-1">
                    <div class="block-sidebar w-1 p-3">
                        <div class="logo">
                            <img src="assets/showcase/images/landing/blocks/logo-1.svg" alt="block logo" />
                        </div>
                        <div class="sidebar-menu mt-5">
                            <div class="bar w-8 my-3"></div>
                            <div class="bar w-9 my-3"></div>
                            <div class="bar w-7 my-3"></div>
                            <div class="bar w-6 my-3"></div>
                            <div class="bar w-9 my-3"></div>
                        </div>
                    </div>
                    <div class="block-content flex-1 p-4 flex flex-column">
                        <div class="block-main h-full flex justify-content-center align-items-center flex-column">
                            <div class="bar w-3 mb-3"></div>
                            <div class="bar w-4 mb-5"></div>
                            <div class="flex justify-content-between">
                                <div class="block-item w-6rem p-0">
                                    <div class="block-image"></div>
                                    <div class="p-2">
                                        <div>
                                            <div class="bar w-4rem my-2"></div>
                                            <div class="bar w-2rem mb-2"></div>
                                        </div>
                                        <div>
                                            <div class="flex-1">
                                                <div class="circle circle-highlight circle-medium"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="block-item block-item-active mx-3 animation-1  w-6rem p-0">
                                    <div class="block-image"></div>
                                    <div class="p-2">
                                        <div>
                                            <div class="bar w-4rem my-2"></div>
                                            <div class="bar w-2rem mb-2"></div>
                                        </div>
                                        <div>
                                            <div class="flex-1">
                                                <div class="circle circle-highlight circle-medium"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="block-item w-6rem p-0">
                                    <div class="block-image"></div>
                                    <div class="p-2">
                                        <div>
                                            <div class="bar w-4rem my-2"></div>
                                            <div class="bar w-2rem mb-2"></div>
                                        </div>
                                        <div>
                                            <div class="flex-1">
                                                <div class="circle circle-highlight circle-medium"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="prime-block  flex align-self-stretch p-1">
                    <div class="block-sidebar p-3">
                        <div class="logo">
                            <img src="assets/showcase/images/landing/blocks/logo-2.svg" alt="block logo" />
                        </div>
                        <div class="sidebar-menu mt-5">
                            <div class="circle my-3"></div>
                            <div class="circle my-3"></div>
                            <div class="circle my-3"></div>
                        </div>
                    </div>
                    <div class="block-sidebar-list px-4">
                        <div class="bar w-2rem my-3"></div>
                        <div class="bar w-3rem my-3"></div>
                        <div class="bar w-2rem my-3"></div>
                        <div class="bar w-2rem my-3"></div>
                        <div class="bar w-1rem my-3"></div>
                        <div class="bar w-3rem my-3"></div>
                        <div class="bar w-3rem my-3"></div>
                        <div class="bar w-2rem my-3"></div>
                    </div>
                    <div class="block-content flex-1 my-5 mx-4 flex flex-column">
                        <div class="block-main  h-full flex justify-content-center align-items-center flex-column px-2">
                            <div class="flex justify-content-between">
                                <div class="block-item block-item-table block-item-active animation-1 flex ">
                                    <div class="bar w-3rem mx-3"></div>
                                    <div class="bar w-3rem mx-3"></div>
                                    <div class="bar w-3rem mx-3"></div>
                                    <div class="bar w-3rem mx-3"></div>
                                </div>
                            </div>
                            <div class="block-item block-item-col  flex ">
                                <div class="flex">
                                    <div class="circle circle-small circle-highlight -mr-1"></div>
                                    <div class="bar w-3rem mx-3"></div>
                                </div>
                                <div class="bar w-3rem mx-3"></div>
                                <div class="bar w-3rem mx-3"></div>
                                <div class="bar w-3rem mx-3"></div>
                            </div>
                            <div class="block-item block-item-col  flex ">
                                <div class="flex">
                                    <div class="circle circle-small circle-highlight -mr-1"></div>
                                    <div class="bar w-3rem mx-3"></div>
                                </div>
                                <div class="bar w-3rem mx-3"></div>
                                <div class="bar w-3rem mx-3"></div>
                                <div class="bar w-3rem mx-3"></div>
                            </div>
                            <div class="block-item block-item-col  flex ">
                                <div class="flex">
                                    <div class="circle circle-small circle-highlight -mr-1"></div>
                                    <div class="bar w-3rem mx-3"></div>
                                </div>
                                <div class="bar w-3rem mx-3"></div>
                                <div class="bar w-3rem mx-3"></div>
                                <div class="bar w-3rem mx-3"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex">
                <div class="prime-block p-1 flex align-self-stretch flex-column">
                    <div class="block-header py-3 px-4 flex justify-content-between align-items-center">
                        <div class="logo pr-5">
                            <img src="assets/showcase/images/landing/blocks/logo-1.svg" alt="block logo" />
                        </div>
                        <div class="flex-auto sidebar-menu flex">
                            <div class="bar w-2rem mx-2"></div>
                            <div class="bar w-2rem mx-2"></div>
                            <div class="bar w-2rem mx-2"></div>
                            <div class="bar w-2rem mx-2"></div>
                            <div class="bar w-2rem mx-2"></div>
                        </div>
                        <div class="circle"></div>
                    </div>
                    <div class="block-content flex-1 p-4 flex flex-column">
                        <div class="block-main h-full flex justify-content-center align-items-center flex-column">
                            <div class="block-item block-item-active animation-2 mx-3 w-8rem text-center flex flex-column align-items-center overflow-visible">
                                <div class="-mt-4">
                                    <img src="assets/showcase/images/landing/blocks/question.svg" alt="question mark" />
                                </div>
                                <div class="bar w-2rem mt-2"></div>
                                <div class="bar w-6rem mt-2"></div>
                                <div class="bar w-4rem mt-2"></div>
                                <div class="flex">
                                    <div class="bar bar-highlight bar-button w-4rem mr-2 mt-4"></div>
                                    <div class="bar bar-button w-4rem  mr-2 mt-4"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>

    <section class="landing-designer py-8">
        <div class="section-header">Theme Designer</div>
        <p class="section-detail">Designer is the ultimate tool to create your own primeng experience powered by a SASS based theme engine with 500+ variables and a Visual Designer.</p>
        <div class="designer-main mt-7 justify-content-center pad-section"
            [style]="{'background-size':'cover'}" [ngStyle]="{'background-image': config.dark ? 'url(assets/showcase/images/landing/wave-dark-alt.svg)' : 'url(assets/showcase/images/landing/wave-light-alt.svg)'}">
            <div class="box p-4 flex flex-column md:flex-row z-1 designer-editor">
                <div class="mr-0 md:mr-4 p-4 designer-controls box border-bottom-1 border-left-none border-right-none border-top-none md:border-bottom-none md:border-right-1" [style]="{'border-radius': '10px'}">
                    <div class="text-center mb-4">
                        <img src="assets/showcase/images/landing/designer-{{config.dark ? 'light' : 'dark'}}.svg" />
                    </div>
                    <div class="p-fluid">
                        <span class="font-semibold block mb-3">Primary</span>
                        <div>
                            <button type="button" class="border-circle w-2rem h-2rem p-link mr-3" [style]="{'background-color':'#03C4E8'}" (click)="changeDesignerTheme('#03C4E8', '#029dba')"></button>
                            <button type="button" class="border-circle w-2rem h-2rem p-link mr-3" [style]="{'background-color':'#03E8BF'}" (click)="changeDesignerTheme('#03E8BF', '#02ba99')"></button>
                            <button type="button" class="border-circle w-2rem h-2rem p-link mr-3" [style]="{'background-color':'#916AFF'}" (click)="changeDesignerTheme('#916AFF', '#7455cc')"></button>
                            <button type="button" class="border-circle w-2rem h-2rem p-link" [style]="{'background-color':'#FFBD80'}" (click)="changeDesignerTheme('#FFBD80','#cc9766')"></button>
                        </div>

                        <span class="font-semibold block mt-4 mb-3">Font</span>
                        <p-dropdown [options]="fonts" [(ngModel)]="selectedFont" (onChange)="changeFont()"></p-dropdown>

                        <span class="font-semibold block mt-4 mb-3">Size</span>
                        <div class="flex align-items-center">
                            <div class="flex align-items-center">
                                <p-radioButton inputId="size-small" value="small" name="sizevalue" [(ngModel)]="size"></p-radioButton>
                                <label for="size-small" class="ml-2 font-medium">Small</label>
                            </div>
                            <div class="flex align-items-center ml-4">
                                <p-radioButton inputId="size-normal" value="normal" name="sizevalue" [(ngModel)]="size"></p-radioButton>
                                <label for="size-normal" class="ml-2 font-medium">Normal</label>
                            </div>
                            <div class="flex align-items-center ml-4">
                                <p-radioButton inputId="size-large" value="large" name="sizevalue" [(ngModel)]="size"></p-radioButton>
                                <label for="size-large" class="ml-2 font-medium">Large</label>
                            </div>
                        </div>

                        <span class="font-semibold block mt-4 mb-3">Input Style</span>
                        <div class="flex align-items-center mb-6">
                            <div class="flex align-items-center">
                                <p-radioButton inputId="inputStyle1" value="outlined" name="inputstylevalue" [(ngModel)]="inputStyle"></p-radioButton>
                                <label for="inputStyle1" class="ml-2 font-medium">Outlined</label>
                            </div>
                            <div class="flex align-items-center ml-4">
                                <p-radioButton inputId="inputStyle2" value="filled" name="inputstylevalue" [(ngModel)]="inputStyle"></p-radioButton>
                                <label for="inputStyle2" class="ml-2 font-medium">Filled</label>
                            </div>
                        </div>

                        <a href="https://www.primefaces.org/designer-ng" target="_blank" class="font-semibold p-3 border-round flex align-items-center linkbox active">
                            <span>View Full Version</span>
                            <i class="pi pi-arrow-right ml-auto"></i>
                        </a>
                    </div>
                </div>
                <div class="p-4 designer-demo p-input-filled" #editor [style]="{'border-radius':'10px'}" [ngClass]="{'p-input-filled': inputStyle === 'filled', 'demo-size-small': size === 'small', 'demo-size-large': size === 'large'}">
                    <div class="p-fluid formgrid grid">
                        <div class="field col-12 xl:col-6">
                            <label for="username" class="font-semibold mb-3 p-component">Username</label>
                            <input class="p-inputtext" id="username" type="text" />
                        </div>
                        <div class="field col-12 xl:col-6">
                            <label for="email" class="font-semibold mb-3 p-component">Email</label>
                            <input class="p-inputtext" id="email" type="text" />
                        </div>
                        <div class="field col-12 xl:col-6">
                            <label for="price" class="font-semibold mb-3 p-component">Price</label>
                            <div class="p-inputgroup">
                                <span class="p-inputgroup-addon">$</span>
                                <p-inputNumber inputId="price" placeholder="Price" [(ngModel)]="price"></p-inputNumber>
                                <span class="p-inputgroup-addon">.00</span>
                            </div>
                        </div>
                        <div class="field col-12 xl:col-6">
                            <label for="date" class="font-semibold mb-3 p-component">Date</label>
                            <p-calendar [(ngModel)]="date2" [showIcon]="true" inputId="date" placeholder="mm/dd/yyyy"></p-calendar>
                        </div>
                        <div class="field col-12 xl:col-6">
                            <span class="font-semibold mb-2 block mb-3 mt-3 p-component">City</span>
                            <p-listbox [(ngModel)]="selectedCity" [options]="cities" optionLabel="name"></p-listbox>
                        </div>
                        <div class="field col-12 xl:col-6">
                            <label for="email" class="font-semibold mb-3 mt-3 p-component">Range</label>
                            <p-slider [(ngModel)]="rangeValues" class="w-20rem" [range]="true"></p-slider>

                            <span class="font-semibold mb-2 block mb-3 mt-5  p-component">Checkboxes</span>
                            <div class="flex flex-column xl:flex-row xl:align-items-center">
                                <div class="flex align-items-center">
                                    <p-checkbox inputId="cb1" [(ngModel)]="selectedOptions"  name="cbvalue" value="1"></p-checkbox>
                                    <label for="cb1" class="ml-2 font-medium p-component white-space-nowrap">Option 1</label>
                                </div>
                                <div class="flex align-items-center mt-3 xl:mt-0 xl:ml-4">
                                    <p-checkbox inputId="cb2" [(ngModel)]="selectedOptions" name="cbvalue" value="2"></p-checkbox>
                                    <label for="cb2" class="ml-2 font-medium p-component white-space-nowrap">Option 2</label>
                                </div>
                            </div>

                            <span class="font-semibold mb-2 block mb-3 mt-5 p-component">Buttons</span>
                            <div class="flex align-items-center">
                                <button pButton type="button" label="Save" icon="pi pi-check" class="mr-1"></button>
                                <button pButton type="button" label="Clear" icon="pi pi-times" class="p-button-outlined ml-1"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="landing-templates theme-dark py-8">
        <div class="section-header">Templates</div>
        <p class="section-detail">Professionally designed highly customizable application templates to get started in style.</p>
        <div class="flex justify-content-center mt-4">
            <a href="https://www.primefaces.org/store" class="font-semibold p-3 border-round flex align-items-center linkbox active"
             style="z-index:99;">
                <span>Learn More</span>
                <i class="pi pi-arrow-right ml-2"></i>
            </a>
        </div>
        <section class="templates templates-animation flex justify-content-center align-items-center flex-column mt-7">
            <div class="flex">
                <div class="template-block block-1 mr-2 flex justify-content-center align-items-center" [ngStyle]="{'background-image': config.dark ? 'url(assets/showcase/images/landing/templates/diamond-dark.jpeg)' : 'url(assets/showcase/images/landing/templates/diamond-light.jpeg)'}" [style]="{'background-size':'cover'}">
                    <a class="templates-btn" href="https://www.primefaces.org/diamond-ng/" target="_blank">Diamond Preview</a>
                </div>
                <div class="template-block block-2 ml-2 flex justify-content-center align-items-center" [ngStyle]="{'background-image': config.dark ? 'url(assets/showcase/images/landing/templates/freya-dark.jpeg)' : 'url(assets/showcase/images/landing/templates/freya-light.jpeg)'}" [style]="{'background-size':'cover'}">
                    <a class="templates-btn" href="https://www.primefaces.org/freya-ng/" target="_blank">Freya Preview</a>
                </div>
            </div>
            <div class="flex my-4">
                <div class="template-block block-3 mr-2 flex justify-content-center align-items-center" [ngStyle]="{'background-image': config.dark ? 'url(assets/showcase/images/landing/templates/atlantis-dark.jpeg)' : 'url(assets/showcase/images/landing/templates/atlantis-light.jpeg)'}" [style]="{'background-size':'cover'}">
                    <a class="templates-btn" href="https://www.primefaces.org/atlantis-ng/" target="_blank">Atlantis Preview</a>
                </div>
                <img class="template-block block-middle border-none box-shadow-none mr-2 flex justify-content-center align-items-center flex-column m-auto" [style]="{'height':'100%'}" [src]="config.dark ? 'assets/showcase/images/landing/templates/templates-text-dark.png' : 'assets/showcase/images/landing/templates/templates-text-light.png'"/>
                <div class="template-block block-5 mr-2 flex justify-content-center align-items-center" [ngStyle]="{'background-image': config.dark ? 'url(assets/showcase/images/landing/templates/apollo-dark.jpeg)' : 'url(assets/showcase/images/landing/templates/apollo-light.jpeg)'}" [style]="{'background-size':'cover'}">
                    <a class="templates-btn" href="https://www.primefaces.org/apollo-ng/" target="_blank">Apollo Preview</a>
                </div>
            </div>
            <div class="flex">
                <div class="template-block block-5 mr-2 flex justify-content-center align-items-center" [ngStyle]="{'background-image': config.dark ? 'url(assets/showcase/images/landing/templates/serenity-dark.jpeg)' : 'url(assets/showcase/images/landing/templates/serenity-light.jpeg)'}" [style]="{'background-size':'cover'}">
                    <a class="templates-btn" href="https://www.primefaces.org/serenity-ng/" target="_blank">Serenity Preview</a>
                </div>
                <div class="template-block block-5 mr-2 flex justify-content-center align-items-center" [ngStyle]="{'background-image': config.dark ? 'url(assets/showcase/images/landing/templates/ultima-dark.jpeg)' : 'url(assets/showcase/images/landing/templates/ultima-light.jpeg)'}" [style]="{'background-size':'cover'}">
                    <a class="templates-btn" href="https://www.primefaces.org/ultima-ng/" target="_blank">Ultima Preview</a>
                </div>
            </div>
            <div class="lines">
                <div class="top">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <div class="left">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </section>
    </section>

    <section class="landing-users py-8 pad-section">
        <div class="section-header">Who Uses</div>
        <p class="section-detail">Open source products of PrimeTek are used all around the world by millions of developers.</p>
        <div class="grid mt-7">
            <div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
                <div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
                    <img src="assets/showcase/images/landing/whouses/fox-{{config.dark ? 'light' : 'dark'}}.svg" alt="fox logo" />
                </div>
            </div>
            <div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
                <div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
                    <img src="assets/showcase/images/landing/whouses/airbus-{{config.dark ? 'light' : 'dark'}}.svg" alt="airbus logo" />
                </div>
            </div>
            <div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
                <div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
                    <img src="assets/showcase/images/landing/whouses/mercedes-{{config.dark ? 'light' : 'dark'}}.svg" alt="mercedes logo" />
                </div>
            </div>
            <div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
                <div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
                    <img src="assets/showcase/images/landing/whouses/ebay-{{config.dark ? 'light' : 'dark'}}.svg" alt="ebay logo" />
                </div>
            </div>
            <div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
                <div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
                    <img src="assets/showcase/images/landing/whouses/ford-{{config.dark ? 'light' : 'dark'}}.svg" alt="ford logo" />
                </div>
            </div>
            <div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
                <div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
                    <img src="assets/showcase/images/landing/whouses/vw-{{config.dark ? 'light' : 'dark'}}.svg" alt="volkswage logo" />
                </div>
            </div>
            <div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
                <div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
                    <img src="assets/showcase/images/landing/whouses/intel-{{config.dark ? 'light' : 'dark'}}.svg" alt="intel logo" />
                </div>
            </div>
            <div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
                <div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
                    <img src="assets/showcase/images/landing/whouses/unicredit-{{config.dark ? 'light' : 'dark'}}.svg" alt="unicredit logo" />
                </div>
            </div>
            <div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
                <div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
                    <img src="assets/showcase/images/landing/whouses/lufthansa-{{config.dark ? 'light' : 'dark'}}.svg" alt="lufthansa logo" />
                </div>
            </div>
            <div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
                <div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
                    <img src="assets/showcase/images/landing/whouses/nvidia-{{config.dark ? 'light' : 'dark'}}.svg" alt="nvidia logo" />
                </div>
            </div>
            <div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
                <div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
                    <img src="assets/showcase/images/landing/whouses/verizon-{{config.dark ? 'light' : 'dark'}}.svg" alt="verizon logo" />
                </div>
            </div>
            <div class="col-6 md:col-4 lg:col-3 xl:col-2 flex justify-content-center p-3">
                <div class="box w-10rem h-10rem flex justify-content-center align-items-center bg-transparent">
                    <img src="assets/showcase/images/landing/whouses/amex-{{config.dark ? 'light' : 'dark'}}.svg" alt="american express logo" />
                </div>
            </div>
        </div>
    </section>

    <section class="landing-features py-8">
        <div class="section-header">Features</div>
        <p class="section-detail">primeng is the most complete solution for your UI requirements.</p>
        <div class="grid mt-7 pad-section" [style]="{'background-size':'cover'}" [ngStyle]="{'background-image': config.dark ? 'url(assets/showcase/images/landing/wave-dark-alt.svg)' : 'url(assets/showcase/images/landing/wave-light-alt.svg)'}">
            <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                <div class="box p-4 w-full">
                    <img src="assets/showcase/images/landing/features/icon-components.svg" alt="components icon" class="block mb-3"/>
                    <div class="font-semibold mb-3 text-lg">90+ UI Components</div>
                    <p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 90+ impressive Angular Components.</p>
                </div>
            </div>
            <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                <div class="box p-4 w-full">
                    <img src="assets/showcase/images/landing/features/icon-community.svg" alt="components icon" class="block mb-3"/>
                    <div class="font-semibold mb-3 text-lg">Community</div>
                    <p class="m-0 text-secondary font-medium">Connect with the other open source community members, collaborate and have a voice in the project roadmap.</p>
                </div>
            </div>
            <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                <div class="box p-4 w-full">
                    <img src="assets/showcase/images/landing/features/icon-productivity.svg" alt="components icon" class="block mb-3"/>
                    <div class="font-semibold mb-3 text-lg">Productivity</div>
                    <p class="m-0 text-secondary font-medium">Boost your productivity by achieving more in less time and accomplish amazing results.</p>
                </div>
            </div>
            <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                <div class="box p-4 w-full">
                    <img src="assets/showcase/images/landing/features/icon-accessibility.svg" alt="components icon" class="block mb-3"/>
                    <div class="font-semibold mb-3 text-lg">Accessibility</div>
                    <p class="m-0 text-secondary font-medium">The ultimate set of UI Components to assist you with 90+ impressive Angular Components.</p>
                </div>
            </div>
            <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                <div class="box p-4 w-full">
                    <img src="assets/showcase/images/landing/features/icon-support.svg" alt="components icon" class="block mb-3"/>
                    <div class="font-semibold mb-3 text-lg">Enterprise Support</div>
                    <p class="m-0 text-secondary font-medium">Exceptional support service featuring response within 1 business day and option to request enhancements and new features for the library.</p>
                </div>
            </div>
            <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                <div class="box p-4 w-full">
                    <img src="assets/showcase/images/landing/features/icon-mobile.svg" alt="components icon" class="block mb-3"/>
                    <div class="font-semibold mb-3 text-lg">Mobile</div>
                    <p class="m-0 text-secondary font-medium">First class support for responsive design led by touch optimized elements.</p>
                </div>
            </div>
            <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                <div class="box p-4 w-full">
                    <img src="assets/showcase/images/landing/features/icon-theme.svg" alt="components icon" class="block mb-3"/>
                    <div class="font-semibold mb-3 text-lg">Themes</div>
                    <p class="m-0 text-secondary font-medium">Built on a design-agnostic api, choose from a vast amount of themes such as material, bootstrap, custom or develop your own.</p>
                </div>
            </div>
            <div class="col-12 md:col-6 xl:col-3 flex justify-content-center p-3">
                <div class="box p-4 w-full">
                    <img src="assets/showcase/images/landing/features/icon-ts.svg" alt="components icon" class="block mb-3"/>
                    <div class="font-semibold mb-3 text-lg">Typescript</div>
                    <p class="m-0 text-secondary font-medium">Top-notch support for Typescript with types and tooling assistance.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="landing-footer pt-8 pad-section">
        <div class="flex flex-wrap z-1">
            <div class="w-6 lg:w-3 flex">
                <ul class="list-none p-0 m-0">
                    <li class="font-bold mb-5">General</li>
                    <li class="mb-4">
                        <a [routerLink]="['setup']">
                            <a class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Get Started</a>
                        </a>
                    </li>
                    <li class="mb-4">
                        <a href="https://github.com/primefaces/primeng-examples" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Examples</a>
                    </li>
                </ul>
            </div>
            <div class="w-6 lg:w-3 flex">
                <ul class="list-none p-0 m-0">
                    <li class="font-bold mb-5">Support</li>
                    <li class="mb-4">
                        <a href="https://forum.primefaces.org/viewforum.php?f=57" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Forum</a>
                    </li>
                    <li class="mb-4">
                        <a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Discord</a>
                    </li>
                    <li class="mb-4">
                        <a [routerLink]="['support']">
                            <a class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PRO Support</a>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="w-6 lg:w-3 flex">
                <ul class="list-none p-0 m-0">
                    <li class="font-bold mt-5 lg:mt-0 mb-5">Resources</li>
                    <li class="mb-4">
                        <a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeTV</a>
                    </li>
                    <li class="mb-4">
                        <a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Store</a>
                    </li>
                    <li class="mb-4">
                        <a href="https://github.com/primefaces/primeng" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Source Code</a>
                    </li>
                    <li class="mb-4">
                        <a href="https://twitter.com/prime_ng" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Twitter</a>
                    </li>
                    <li class="mb-4">
                        <a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Newsletter</a>
                    </li>
                    <li class="mb-4">
                        <a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeGear</a>
                    </li>
                    <li class="mb-4">
                        <a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div class="w-6 lg:w-3 flex">
                <ul class="list-none p-0 m-0">
                    <li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
                    <li class="mb-4">
                        <a [routerLink]="['theming']">
                            <a class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Guide</a>
                        </a>
                    </li>
                    <li class="mb-4">
                        <a href="https://www.primefaces.org/designer/primeng" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</a>
                    </li>
                    <li class="mb-4">
                        <a [routerLink]="['colors']">
                            <a class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</a>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <hr class="section-divider mt-8"/>

        <div class="flex justify-content-between py-6">
            <a href="/">
                <img src="assets/showcase/images/primeng-logo-{{config.dark ? 'light' : 'dark'}}.svg" alt="primeng logo" />
            </a>
            <div class="flex align-items-center">
                <a href="https://twitter.com/prime_ng" target="_blank" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
                    <i class="pi pi-twitter"></i>
                </a>
                <a href="https://github.com/primefaces/primeng" target="_blank"  class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center mr-3">
                    <i class="pi pi-github"></i>
                </a>
                <a href="https://discord.gg/gzKFYnpmCY" target="_blank" class="linkbox block w-3rem h-3rem flex align-items-center justify-content-center">
                    <i class="pi pi-discord"></i>
                </a>
            </div>
        </div>
    </section>
</div>
